<template>
    <div class="scada-center-scene">
        <el-card v-show="showSearch" class="search-card">
            <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="46px" class="search-form">
                <el-form-item prop="pageName">
                    <el-input v-model="queryParams.pageName" :placeholder="$t('scada.center.indeieScada.373453-1')" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
                <div style="float: right">
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('search') }}</el-button>
                    <el-button icon="el-icon-refresh" @click="handleResetQuery">{{ $t('reset') }}</el-button>
                </div>
            </el-form>
        </el-card>

        <el-card>
            <el-row :gutter="10">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-hasPermi="['scada:center:add']">{{ $t('add') }}</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" v-hasPermi="['scada:center:edit']">{{ $t('scada.center.sceneScada.098325-0') }}</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" v-hasPermi="['scada:center:remove']">{{ $t('del') }}</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button plain icon="el-icon-download" size="small" @click="handleExport" v-hasPermi="['scada:center:export']">{{ $t('export') }}</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
                    <template>
                        <div class="button-group">
                            <el-tooltip effect="dark" content="切换到卡片视图" placement="top">
                                <el-button size="mini" icon="el-icon-s-claim" @click="handleShowTypeCard" :class="['toggle-button card-button', { active: isListView }]" />
                            </el-tooltip>
                            <div class="separator"></div>
                            <el-tooltip effect="dark" content="切换到列表视图" placement="top">
                                <el-button size="mini" icon="el-icon-s-grid" @click="handleShowTypeList" :class="['toggle-button list-button', { active: !isListView }]" />
                            </el-tooltip>
                        </div>
                    </template>
                </right-toolbar>
            </el-row>

            <div v-if="showType == 'card'" style="margin-top: 20px">
                <el-row :gutter="20" v-loading="loading">
                    <el-checkbox-group v-model="ids" @change="checkboxChange">
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" style="margin-bottom: 20px" v-for="item in centerList" :key="item.id">
                            <el-card class="card-wrap" :body-style="{ padding: '0px' }">
                                <div class="img-wrap">
                                    <el-image style="width: 100%; height: 100%; cursor: pointer" lazy :src="baseApi + item.pageImage" fit="cover" v-hasPermi="['scada:center:query']" @click="goToDetail(item)"></el-image>
                                </div>
                                <div class="tag-wrap">
                                    <span>{{ item.pageResolution ? item.pageResolution : $t('scada.center.indeieScada.373453-3') }}</span>
                                </div>
                                <div class="title-wrap">
                                    <div class="name-wrap">
                                        <el-checkbox class="checkbox" size="medium" :label="item.id" :key="item.id">
                                            <span v-show="false">{{ $t('scada.component.302923-4') }}</span>
                                        </el-checkbox>
                                        <div class="name">
                                            {{ item.pageName }}
                                        </div>
                                    </div>
                                    <div class="time">
                                        {{ parseTime(item.updateTime, '{y}-{m}-{d}') }}
                                    </div>
                                </div>
                                <el-button-group class="tools-wrap">
                                    <el-button type="text" icon="el-icon-edit" size="small" @click="handleUpdate(item)" v-hasPermi="['scada:center:edit']">{{ $t('scada.center.sceneScada.098325-0') }}</el-button>
                                    <span style="width: 1px; margin: 0px 10px; font-size: 16px; color: #dcdfe6" v-hasPermi="['scada:center:edit']">|</span>
                                    <el-button type="text" icon="el-icon-c-scale-to-original" size="small" @click="goToDetail(item)" v-hasPermi="['scada:center:query']">
                                        {{ $t('scada.center.sceneScada.098325-1') }}
                                    </el-button>
                                    <span style="width: 1px; margin: 0px 10px; font-size: 16px; color: #dcdfe6" v-hasPermi="['scada:center:query']">|</span>
                                    <el-button type="text" icon="el-icon-view" size="small" @click="handlePreview(item)" v-hasPermi="['scada:center:preview']">
                                        {{ $t('scada.center.sceneScada.098325-2') }}
                                    </el-button>
                                    <span style="width: 1px; margin: 0px 10px; font-size: 16px; color: #dcdfe6" v-hasPermi="['scada:center:preview']">|</span>
                                    <el-button type="text" icon="el-icon-share" size="small" @click="handleShare(item)" v-hasPermi="['scada:center:share']">
                                        {{ $t('scada.center.sceneScada.098325-3') }}
                                    </el-button>
                                    <span style="width: 1px; margin: 0px 10px; font-size: 16px; color: #dcdfe6" v-hasPermi="['scada:center:share']">|</span>
                                    <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(item)" v-hasPermi="['scada:center:remove']">
                                        {{ $t('del') }}
                                    </el-button>
                                </el-button-group>
                            </el-card>
                        </el-col>
                    </el-checkbox-group>
                </el-row>
                <el-empty :description="$t('noData')" v-if="total == 0"></el-empty>
                <pagination style="margin: 0 0 20px 0" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
            </div>
            <div v-if="showType == 'list'" style="margin-top: 16px">
                <el-table v-loading="loading" :data="centerList" :border="false" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column :label="$t('scada.center.indeieScada.373453-5')" align="left" prop="pageName" min-width="240" />
                    <el-table-column :label="$t('scada.center.indeieScada.373453-4')" align="center" prop="pageImage" width="100">
                        <template slot-scope="scope">
                            <image-preview :src="scope.row.pageImage" :width="48" :height="48" />
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('scada.center.indeieScada.373453-6')" align="center" prop="pageResolution" width="120">
                        <template slot-scope="scope">
                            <span>{{ scope.row.pageResolution ? scope.row.pageResolution : $t('scada.center.indeieScada.373453-3') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('updateTime')" align="center" prop="updateTime" width="120">
                        <template slot-scope="scope">
                            {{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" :label="$t('opation')" align="center" width="290">
                        <template slot-scope="scope">
                            <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['scada:center:edit']">{{ $t('scada.center.sceneScada.098325-0') }}</el-button>
                            <el-button size="small" type="text" icon="el-icon-news" @click="goToDetail(scope.row)" v-hasPermi="['scada:center:query']">
                                {{ $t('scada.center.sceneScada.098325-1') }}
                            </el-button>
                            <el-button size="small" type="text" icon="el-icon-c-scale-to-original" @click="handlePreview(scope.row)" v-hasPermi="['scada:center:preview']">
                                {{ $t('scada.center.sceneScada.098325-2') }}
                            </el-button>
                            <el-button size="small" type="text" icon="el-icon-share" @click="handleShare(scope.row)" v-hasPermi="['scada:center:share']">
                                {{ $t('scada.center.sceneScada.098325-3') }}
                            </el-button>
                            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['scada:center:remove']">{{ $t('del') }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination style="margin-bottom: 20px" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>
        </el-card>

        <!-- 添加或修改组态信息对话框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="600px" append-to-body>
            <el-form ref="dialogForm" :model="dialog.form" :rules="dialog.rules" label-width="100px">
                <el-form-item :label="$t('scada.center.indeieScada.373453-4')" prop="pageImage">
                    <image-upload v-model="dialog.form.pageImage" :multiple="false" :class="{ disable: uploadDisabled }" />
                </el-form-item>
                <el-form-item :label="$t('scada.center.indeieScada.373453-5')" prop="pageName">
                    <el-input v-model="dialog.form.pageName" :placeholder="$t('scada.center.indeieScada.373453-7')" clearable style="width: 400px" />
                </el-form-item>
                <el-form-item :label="$t('scada.center.indeieScada.373453-11')" prop="sceneModelId">
                    <el-select v-model="dialog.form.sceneModelId" :placeholder="$t('scada.center.indeieScada.373453-12')" clearable filterable style="width: 400px">
                        <el-option v-for="item in sceneList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('scada.center.indeieScada.373453-8')" prop="remark">
                    <el-input v-model="dialog.form.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" :placeholder="$t('scada.center.indeieScada.373453-9')" clearable style="width: 400px" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleDialogSubmit">{{ $t('confirm') }}</el-button>
                <el-button @click="handleDialogCancel">{{ $t('cancel') }}</el-button>
            </div>
        </el-dialog>
        <!-- 分享对话框 -->
        <scada-share-dialog ref="scadaShareDialog" :guid="scadaGuid" :type="2" :visible.sync="isScadaShare"></scada-share-dialog>
    </div>
</template>

<script>
import auth from '@/plugins/auth';
import { getSceneModelList } from '@/api/scene/list.js';
import { listCenter, getCenter, delCenter, addCenter, updateCenter } from '@/api/scada/center';
import ScadaShareDialog from '@/views/scada/common/ScadaShareDialog/index.vue';

export default {
    name: 'SceneScada',
    components: { ScadaShareDialog },
    dicts: ['sys_page_size'],
    computed: {
        uploadDisabled: function () {
            return this.dialog.form.pageImage !== '';
        },
    },
    data() {
        return {
            loading: true, // 遮罩层
            isListView: true, // 默认选中列表视图
            baseApi: process.env.VUE_APP_BASE_API,
            single: true, // 非单个禁用
            multiple: true, // 非多个禁用
            showSearch: true, // 显示搜索条件
            // 查询参数
            queryParams: {
                type: 2,
                pageName: null,
                pageNum: 1,
                pageSize: 12,
            },
            ids: [], // 选中数组
            centerList: [], // 组态中心表格数据
            total: 0, // 总条数
            showType: 'card', // 展示方式
            dialog: {
                open: false, // 弹出层标题
                title: '', // 对话框标题
                // 表单参数
                form: {
                    type: 2,
                    pageImage: '',
                    pageName: '',
                    sceneModelId: '',
                    remark: '',
                },
                // 表单校验
                rules: {
                    pageName: [{ required: true, message: this.$t('scada.center.indeieScada.373453-10'), trigger: 'blur' }],
                    sceneModelId: [{ required: true, message: this.$t('scada.center.indeieScada.373453-12'), trigger: 'change' }],
                },
            },
            sceneList: [],
            isScadaShare: false, // 是否分享组态
            scadaGuid: '', // 组态guid
        };
    },
    mounted() {
        this.$busEvent.$on('updateCenter', () => {
            this.getList();
        });
        this.getSceneList();
        this.getList();
        if (this.$route.query.sceneModelId && auth.hasPermi('scada:center:add')) {
            this.handleAdd();
            this.$set(this.dialog.form, 'sceneModelId', Number(this.$route.query.sceneModelId));
        }
    },
    methods: {
        // 查询设备场景列表
        getSceneList() {
            const params = {
                pageNum: 1,
                pageSize: 9999,
            };
            getSceneModelList(params).then((res) => {
                this.sceneList = res.rows.map((item) => {
                    return { value: item.sceneModelId, label: item.sceneModelName };
                });
            });
        },
        // 查询组态中心列表
        getList() {
            this.loading = true;
            listCenter(this.queryParams).then((response) => {
                if (response.code === 200) {
                    this.centerList = response.rows;
                    this.total = response.total;
                }
                this.loading = false;
            });
        },
        // 搜索按钮操作
        handleQuery() {
            this.ids = [];
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置按钮操作
        handleResetQuery() {
            this.ids = [];
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 新增按钮操作
        handleAdd() {
            this.reset();
            this.dialog.open = true;
            this.dialog.title = this.$t('scada.center.indeieScada.373453-13');
        },
        // 表单重置
        reset() {
            this.dialog.form = {
                type: 2,
                pageImage: '',
                pageName: '',
                remark: '',
            };
            this.resetForm('dialogForm');
        },
        // 修改按钮操作
        handleUpdate(row) {
            this.dialog.title = this.$t('scada.center.indeieScada.373453-14');
            const id = row.id || this.ids;
            getCenter(id).then((res) => {
                if (res.code === 200) {
                    this.dialog.form = res.data;
                    this.dialog.open = true;
                }
            });
        },
        // 提交按钮
        handleDialogSubmit() {
            this.$refs['dialogForm'].validate((valid) => {
                if (valid) {
                    if (this.dialog.form.id != null) {
                        updateCenter(this.dialog.form).then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess(this.$t('updateSuccess'));
                                this.dialog.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        addCenter(this.dialog.form).then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess(this.$t('addSuccess'));
                                this.dialog.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        // 取消按钮
        handleDialogCancel() {
            this.dialog.open = false;
        },
        // 删除按钮操作
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm(this.$t('scada.center.indeieScada.373453-15', [ids]))
                .then(() => {
                    this.loading = true;
                    return delCenter(ids);
                })
                .then(() => {
                    this.loading = true;
                    this.getList();
                    if (Array.isArray(ids)) {
                        this.ids = [];
                    }
                    this.$modal.msgSuccess(this.$t('delSuccess'));
                })
                .catch(() => {});
        },
        // 跳转组态详情
        goToDetail(row) {
            const routeUrl = this.$router.resolve({
                path: '/scada/topo/editor',
                query: {
                    id: row.id,
                    guid: row.guid,
                    type: 2,
                    sceneModelId: row.sceneModelId,
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        // 分享
        handleShare(row) {
            this.isScadaShare = true;
            this.scadaGuid = row.guid;
        },
        // 跳转预览详情
        handlePreview(row) {
            const routeUrl = this.$router.resolve({
                path: '/scada/topo/fullscreen',
                query: {
                    guid: row.guid,
                    type: 2,
                    sceneModelId: row.sceneModelId,
                },
            });
            window.open(routeUrl.href, '_blank');
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        // 切换显示方式
        handleShowTypeList() {
            this.ids = [];
            this.isListView = false;
            this.showType = 'list';
        },
        // 切换显示方式
        handleShowTypeCard() {
            this.ids = [];
            this.isListView = true;
            this.showType = 'card';
        },
        // 导出按钮操作
        handleExport() {
            this.download(
                'scada/center/export',
                {
                    ...this.queryParams,
                },
                `组态${new Date().getTime()}.xlsx`
            );
        },
        // 卡片选择
        checkboxChange(selection) {
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
    },
};
</script>

<style lang="scss" scoped>
.scada-center-scene {
    padding: 20px;

    .search-card {
        margin-bottom: 15px;
        padding: 3px 0;
    }

    .search-form {
        margin-bottom: -22.5px;
    }

    .button-group {
        width: 65px;
        height: 32.5px;
        display: flex; /* 让按钮在同一行显示 */
        align-items: center; /* 垂直居中对齐 */
        margin-right: 10px;
        background: #ffffff;

        .toggle-button {
            width: 32.5px;
            height: 32.5px;
            display: flex; /* 使用 flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #dcdfe6;
            background: #fff;
        }

        ::v-deep .el-button:hover,
        .el-button:focus {
            color: unset;
        }

        .active {
            background-color: #e0e0e0; /* 被选中按钮的背景色 */
            border-color: #dcdfe6; /* 被选中按钮的边框色 */
        }

        .card-button {
            border-radius: 4px 0px 0px 4px !important;
        }

        .list-button {
            border-radius: 0px 4px 4px 0px !important;
        }

        .separator {
            width: 1px; /* 分割线的宽度 */
            height: 32px; /* 分割线的高度 */
            background: #dcdfe6; /* 分割线的颜色 */
        }
    }

    .card-wrap {
        position: relative;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #dcdfe6;

        .img-wrap {
            height: 159px;
            width: 100%;
        }

        .tag-wrap {
            position: absolute;
            top: 15px;
            right: 0;
            background: #486ff2;
            opacity: 0.7;
            border-radius: 2px 0px 0px 2px;
            padding: 4px 8px;
            font-size: 12px;
            color: #fff;
        }

        .title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 15px 15px 7px;

            ::v-deep .el-checkbox__inner {
                height: 16px;
                width: 16px;
            }

            ::v-deep .el-checkbox__inner::after {
                height: 9px;
                left: 5px;
            }

            .name-wrap {
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100%;
                overflow: hidden;

                .name {
                    flex: 1 1 auto;
                    font-weight: 500;
                    font-size: 16px;
                    color: #303133;
                    line-height: 22px;
                    white-space: nowrap; /* 不换行 */
                    overflow: hidden; /* 隐藏超出部分 */
                    text-overflow: ellipsis; /* 使用省略号 */
                }
            }

            .time {
                font-weight: 400;
                font-size: 12px;
                color: #909399;
                line-height: 15px;
                margin-left: 10px;
            }
        }

        .tools-wrap {
            padding: 0 10px 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }
}

.disable {
    ::v-deep .el-upload--picture-card {
        display: none !important;
    }
}
</style>
